<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="network_list_item.html">
<link rel="import" href="network_list_types.html">
<link rel="import" href="onc_mojo.html">
<link rel="import" href="../../../cr_elements/cr_scrollable_behavior.html">
<link rel="import" href="../../../cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="../../../html/list_property_update_behavior.html">

<dom-module id="network-list">
  <template>
    <style include="cr-shared-style iron-flex">

      network-list-item {
        align-items: center;
      }

      #container {
        overflow-x: hidden;
        overflow-y: auto;
      }

      #networkList {
        height: 100%;
      }

      /* Override scrollable border-bottom-color */
      #container[no-bottom-scroll-border] {
        border-bottom-color: transparent;
      }

      iron-list > *:not(:first-of-type) {
        border-top: var(--cr-separator-line);
      }

    </style>
    <div id="container" class="layout vertical flex" scrollable
        no-bottom-scroll-border$="[[noBottomScrollBorder]]">
      <iron-list id="networkList" items="[[listItems_]]"
          scroll-target="container" preserve-focus>
        <template>
          <network-list-item item="[[item]]"
              show-technology-badge="[[showTechnologyBadge]]"
              show-buttons="[[showButtons]]"
              tabindex$="[[tabIndex]]"
              focus-row-index="[[index]]"
              iron-list-tab-index="[[tabIndex]]"
              activation-unavailable="[[activationUnavailable]]"
              last-focused="{{lastFocused_}}"
              list-blurred="{{listBlurred_}}"
              device-state="[[deviceState]]"
              global-policy="[[globalPolicy]]"
              disable-item="[[disabled]]">
          </network-list-item>
        </template>
      </iron-list>
    </div>
  </template>
  <script src="network_list.js"></script>
</dom-module>
